<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>车厢环境监测仪表盘</title>
		<script src="js/chart.js"></script>
		<!-- 	<script>
		function getMsg() {
			//使用$.ajax()发送异步请求
			$.ajax({
				url: "https://apis.bemfa.com/va/getmsg", // 请求路径
				type: "GET", //请求方式
				data: {
					uid: "60ce8437cee20782e7355a16e6bb6a39",
					type: 3, //3 为TCP 1为mqtt
					topic: 'Sensor',
					num: 1
				},
				success: function(message) {
					// alert(data);
					let box1 = document.querySelector("#box1");
					var res = JSON.parse(message);
					box1.innerHTML = "消息: " + res.data[0].msg + '  ' + res.data[0].time;
					console.log(res);
				}, //响应成功后的回调函数
				error: function() {
					alert("出错啦...")
				}, //表示如果请求响应出现错误，会执行的回调函数
				dataType: "text" //设置接受到的响应数据的格式
			});
		}
	</script> -->
		<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			}

			body {
				background: linear-gradient(135deg, #0f3460, #1a1a2e, #16213e);
				color: white;
				min-height: 100vh;
				overflow-x: hidden;
				padding: 20px;
			}

			.container {
				max-width: 1400px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: auto 1fr 1fr;
				gap: 10px;
				height: calc(100vh - 40px);
			}

			header {
				grid-column: 1 / -1;
				text-align: center;
				/* padding: 20px 0; */
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				/* margin-bottom: 10px; */
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
			}


			#Count {
				grid-column: 1 / -1;
				text-align: center;
				/* padding: 20px; */
				/* height: 100px; */
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				/* margin-bottom: 10px; */
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				/* grid-template-rows: auto 1fr 1fr; */
			}

			#Open-door {
				font-size: 40px;
			}

			#Close-door {
				font-size: 40px;
			}

			#Light {
				font-size: 40px;
			}

			#Shock {
				font-size: 40px;
			}

			h1 {
				font-size: 2.5rem;
				/* margin-bottom: 10px; */
				background: linear-gradient(90deg, #00c9ff, #92fe9d);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			}

			h2 {
				font-size: 1.5rem;
				/* margin-top: 10px; */
				background: linear-gradient(90deg, #00c9ff, #92fe9d);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			}

			.subtitle {
				font-size: 1.1rem;
				opacity: 0.85;
				max-width: 800px;
				margin: 0 auto;
				line-height: 1.6;
			}

			.data-card {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				padding: 20px;
				display: flex;
				/* flex-direction: column; */
				justify-content: space-between;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				transition: transform 0.3s ease;
			}

			.data-card:hover {
				transform: translateY(-5px);
				box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
			}

			.card-header {
				display: flex;
				align-items: center;
				/* margin-bottom: 15px; */
			}

			.card-icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15px;
				font-size: 1.5rem;
			}

			.card-content {
				display: flex;
				flex-direction: column;
			}

			.card-label {
				font-size: 0.9rem;
				opacity: 0.8;
				margin-bottom: 5px;
			}

			.card-value {
				font-size: 2.5rem;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.card-unit {
				font-size: 1rem;
				opacity: 0.7;
			}

			.card-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15px;
				padding-top: 10px;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
			}

			.trend {
				display: flex;
				align-items: center;
				font-size: 0.9rem;
			}

			.trend.up {
				color: #ff6b6b;
			}

			.trend.down {
				color: #92fe9d;
			}

			.chart-container {
				grid-column: 1 / -1;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				padding: 20px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}

			.chart-panel {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 20px;
				padding-bottom: 50px;
				padding-left: 10px;
				padding-right: 10px;
				height: 300px;
			}

			.chart-title {
				font-size: 1.2rem;
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				color: #00c9ff;
			}

			.chart-title i {
				margin-right: 10px;
			}

			.status-bar {
				grid-column: 1 / -1;
				display: flex;
				justify-content: space-between;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				padding: 15px 30px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			}

			.status-item {
				display: flex;
				align-items: center;
			}

			.status-indicator {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				margin-right: 10px;
			}

			.status-indicator.active {
				background: #92fe9d;
				box-shadow: 0 0 10px rgba(146, 254, 157, 0.5);
			}

			.status-indicator.inactive {
				background: #ff6b6b;
			}

			.last-update {
				font-size: 0.9rem;
				opacity: 0.8;
			}

			/* 卡片颜色 */
			.temp-card .card-icon {
				background: linear-gradient(135deg, #ff416c, #ff4b2b);
			}

			.humidity-card .card-icon {
				background: linear-gradient(135deg, #00c9ff, #92fe9d);
			}

			.cargo-card .card-icon {
				background: linear-gradient(135deg, #ffd26f, #ff7c43);
			}

			.co2-card .card-icon {
				background: linear-gradient(135deg, #8e2de2, #4a00e0);
			}

			/* 响应式设计 */
			@media (max-width: 1100px) {
				.container {
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: auto repeat(2, auto) 1fr auto;
					height: auto;
				}

				.chart-container {
					grid-template-columns: 1fr;
				}
			}

			@media (max-width: 600px) {
				.container {
					grid-template-columns: 1fr;
				}

				.status-bar {
					flex-direction: column;
					gap: 10px;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>环境监测数据展板</h1>
				<!-- <p class="subtitle">实时监测仓库环境参数，确保货物存储条件符合标准要求</p> -->
			</header>
			<div id="Count">
				<h2>开门次数</h2>
				<h2>关门次数</h2>
				<h2>光照次数</h2>
				<h2>震动次数</h2>
				<h2 id="Open-door">0</h2>
				<h2 id="Close-door">0</h2>
				<h2 id="Light">0</h2>
				<h2 id="Shock">0</h2>
			</div>

			<!-- 空气温度卡片 -->
			<div class="data-card temp-card">
				<div class="card-header">
					<div class="card-icon">
						<i class="fas fa-thermometer-half"></i>
					</div>
					<div>
						<h2>空气温度</h2>
						<div class="card-label">当前环境温度</div>
					</div>
				</div>
				<div class="card-content">
					<div class="card-value" id="air-temp-value">22.5</div>
					<div class="card-unit">摄氏度 (°C)</div>
				</div>
				<!-- <div class="card-footer">
					<div class="trend down">
						<i class="fas fa-arrow-down"></i>
						<span>0.3° 较上次</span>
					</div>
					<div class="status">
						<i class="fas fa-check-circle" style="color: #92fe9d;"></i>
						<span>正常范围</span>
					</div>
				</div> -->
			</div>

			<!-- 空气湿度卡片 -->
			<div class="data-card humidity-card">
				<div class="card-header">
					<div class="card-icon">
						<i class="fas fa-tint"></i>
					</div>
					<div>
						<h2>空气湿度</h2>
						<div class="card-label">相对湿度</div>
					</div>
				</div>
				<div class="card-content">
					<div class="card-value" id="humidity-value">45.2</div>
					<div class="card-unit">百分比 (%)</div>
				</div>
				<!-- <div class="card-footer">
					<div class="trend up">
						<i class="fas fa-arrow-up"></i>
						<span>1.2% 较上次</span>
					</div>
					<div class="status">
						<i class="fas fa-check-circle" style="color: #92fe9d;"></i>
						<span>正常范围</span>
					</div>
				</div> -->
			</div>

			<!-- 货物温度卡片 -->
			<div class="data-card cargo-card">
				<div class="card-header">
					<div class="card-icon">
						<i class="fas fa-box"></i>
					</div>
					<div>
						<h2>货物温度</h2>
						<div class="card-label">货物表面温度</div>
					</div>
				</div>
				<div class="card-content">
					<div class="card-value" id="cargo-temp-value">21.8</div>
					<div class="card-unit">摄氏度 (°C)</div>
				</div>
				<!-- <div class="card-footer">
					<div class="trend">
						<i class="fas fa-minus"></i>
						<span>无变化</span>
					</div>
					<div class="status">
						<i class="fas fa-check-circle" style="color: #92fe9d;"></i>
						<span>正常范围</span>
					</div>
				</div> -->
			</div>

			<!-- 二氧化碳浓度卡片 -->
			<div class="data-card co2-card">
				<div class="card-header">
					<div class="card-icon">
						<i class="fas fa-wind"></i>
					</div>
					<div>
						<h2>CO₂ 浓度</h2>
						<div class="card-label">二氧化碳浓度</div>
					</div>
				</div>
				<div class="card-content">
					<div class="card-value" id="co2-value">650</div>
					<div class="card-unit">百万分之一(PPM)</div>
				</div>
				<!-- <div class="card-footer">
					<div class="trend up">
						<i class="fas fa-arrow-up"></i>
						<span>15ppm 较上次</span>
					</div>
					<div class="status">
						<i class="fas fa-exclamation-triangle" style="color: #ffd26f;"></i>
						<span>接近上限</span>
					</div>
				</div> -->
			</div>

			<!-- 图表区域 -->
			<div class="chart-container">
				<div class="chart-panel">
					<div class="chart-title"><i class="fas fa-thermometer-half"></i> 空气温度变化趋势</div>
					<canvas id="temp-chart"></canvas>
				</div>

				<div class="chart-panel">
					<div class="chart-title"><i class="fas fa-tint"></i> 空气湿度变化趋势</div>
					<canvas id="humidity-chart"></canvas>
				</div>

				<div class="chart-panel">
					<div class="chart-title"><i class="fas fa-box"></i> 货物温度变化趋势</div>
					<canvas id="cargo-temp-chart"></canvas>
				</div>

				<div class="chart-panel">
					<div class="chart-title"><i class="fas fa-wind"></i> CO₂ 浓度变化趋势</div>
					<canvas id="co2-chart"></canvas>
				</div>
			</div>

			<!-- 状态栏 -->
			<div class="status-bar">
				<div class="status-item">
					<div class="status-indicator active"></div>
					<span>数据采集: <strong>运行中</strong></span>
				</div>
				<div class="status-item">
					<div class="status-indicator active"></div>
					<span>网络连接: <strong>稳定</strong></span>
				</div>
				<div class="status-item">
					<div class="status-indicator active"></div>
					<span>存储系统: <strong>正常</strong></span>
				</div>
				<div class="last-update">
					<i class="fas fa-sync-alt"></i>
					<span id="update-time">最后更新: 2023-10-15 14:28:35</span>
				</div>
			</div>
		</div>

		<script>
			// 模拟数据生成
			// function generateData(baseValue, amplitude, count) {
			//     const data = [];
			//     let currentValue = baseValue;

			//     for (let i = 0; i < count; i++) {
			//         // 添加一些随机波动
			//         const fluctuation = (Math.random() - 0.5) * amplitude;
			//         currentValue += fluctuation;

			//         // 确保数值在合理范围内
			//         if (i > 0) {
			//             const prevValue = data[i-1];
			//             // 限制变化幅度
			//             if (Math.abs(currentValue - prevValue) > amplitude * 1.5) {
			//                 currentValue = prevValue + (Math.random() - 0.5) * amplitude * 0.5;
			//             }
			//         }

			//         data.push(Number(currentValue.toFixed(1)));
			//     }

			//     return data;
			// }

			// 生成时间标签（24小时）
			// function generateTimeLabels() {
			// 	const labels = [];
			// 	const now = new Date();

			// 	for (let i = 23; i >= 0; i--) {
			// 		const time = new Date(now);
			// 		time.setHours(now.getHours() - i);
			// 		const hours = time.getHours().toString().padStart(2, '0');
			// 		labels.push(`${hours}:00`);
			// 	}

			// 	return labels;
			// }

			// 创建图表
			function createChart(ctx, label, data, color, unit) {
				return new Chart(ctx, {
					type: 'line',
					data: {
						// labels: generateTimeLabels(),
						datasets: [{
							label: label,
							data: data,
							borderColor: color,
							backgroundColor: color + '20',
							borderWidth: 3,
							pointRadius: 0,
							pointHoverRadius: 5,
							tension: 0.3,
							fill: true
						}]
					},
					options: {
						responsive: true,
						maintainAspectRatio: false,
						scales: {
							y: {
								beginAtZero: false,
								grid: {
									color: 'rgba(255, 255, 255, 0.1)'
								},
								ticks: {
									color: 'rgba(255, 255, 255, 0.7)',
									callback: function(value) {
										return value + unit;
									}
								}
							},
							x: {
								grid: {
									display: false
								},
								ticks: {
									color: 'rgba(255, 255, 255, 0.7)',
									// maxTicksLimit: 6
								}
							}
						},
						plugins: {
							legend: {
								display: false
							},
							tooltip: {
								backgroundColor: 'rgba(0, 0, 0, 0.7)',
								titleColor: '#00c9ff',
								bodyColor: '#ffffff',
								borderColor: 'rgba(255, 255, 255, 0.1)',
								borderWidth: 1,
								padding: 12,
								callbacks: {
									label: function(context) {
										return `${label}: ${context.parsed.y}${unit}`;
									}
								}
							}
						},
						interaction: {
							intersect: false,
							mode: 'index'
						}
					}
				});
			}


			const tempData = [];
			const humidityData = [];
			const cargoTempData = [];
			const co2Data = [];

			let Count_last_Time = "";
			let Sensor_last_Time = "";

			// 更新卡片数据
			function updateCardValues() {
				// 更新显示值
				document.getElementById('air-temp-value').textContent = tempData[tempData.length - 1];
				document.getElementById('humidity-value').textContent = humidityData[humidityData.length - 1];
				document.getElementById('cargo-temp-value').textContent = cargoTempData[cargoTempData.length - 1];
				document.getElementById('co2-value').textContent = co2Data[co2Data.length - 1];

				// 更新最后更新时间
				// const now = new Date();
				// const timeString = now.toLocaleString('zh-CN', {
				// 	year: 'numeric',
				// 	month: '2-digit',
				// 	day: '2-digit',
				// 	hour: '2-digit',
				// 	minute: '2-digit',
				// 	second: '2-digit'
				// });
				document.getElementById('update-time').textContent = `最后更新: ${Sensor_last_Time}`;
			}

			// 添加新数据点并移除旧数据
			function addDataPoint(chart, newData) {
				if (chart.data.datasets[0].data.length >= 10) {
					chart.data.labels.shift();
					chart.data.datasets[0].data.shift();
				}

				chart.data.labels.push(newData.time);
				chart.data.datasets[0].data.push(newData.value);
				chart.update();
			}


			// 生成初始数据
			// const tempData = generateData(22.5, 0.8, 24);
			// const humidityData = generateData(45.2, 1.2, 24);
			// const cargoTempData = generateData(21.8, 0.5, 24);
			// const co2Data = generateData(650, 20, 24);





			// 初始化图表
			const tempCtx = document.getElementById('temp-chart').getContext('2d');
			const humidityCtx = document.getElementById('humidity-chart').getContext('2d');
			const cargoTempCtx = document.getElementById('cargo-temp-chart').getContext('2d');
			const co2Ctx = document.getElementById('co2-chart').getContext('2d');

			const tempChart = createChart(tempCtx, '空气温度', tempData, '#ff6b6b', '°C');
			const humidityChart = createChart(humidityCtx, '空气湿度', humidityData, '#00c9ff', '%');
			const cargoTempChart = createChart(cargoTempCtx, '货物温度', cargoTempData, '#ffd26f', '°C');
			const co2Chart = createChart(co2Ctx, 'CO₂浓度', co2Data, '#8e2de2', 'ppm');

			// 初始更新卡片数据
			updateCardValues();

			function sendWechart(device, message) {
				// let input = document.getElementsByClassName('message')[0];
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/vb/wechat/v1/wechatAlert", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						device: device,
						message: message,
					},
					header: {
						"Content-Type": "application/json; charset=utf-8",
					},
					success: function(message) {
						var res = JSON.parse(message);
						console.log("Send Message OK!");
						console.log(res);
					}, //响应成功后的回调函数
					error: function() {
						alert("发送消息出错！");
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text", //设置接受到的响应数据的格式
				});
			}


			function get_Sensor_Historu_Data() {
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/va/getmsg", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						type: 3, //3 为TCP 1为mqtt
						topic: 'Sensor',
						num: 5
					},
					success: function(message) {
						var res = JSON.parse(message);
						console.log(res);
						console.log(res.data);
						// for each{
						// 						let input = res.data[0].msg;
						// 						const parts = input.split('#').filter(part => part !== '');

						// 						// 2. 提取数值和标签
						// 						const [airTemp, airHumi, goodsTemp, co2, labels] = parts;

						// 						// 3. 转换数值类型并解析标签
						// 						const result = {
						// 							airTemp: airTemp,
						// 							airHumi: airHumi,
						// 							goodsTemp: goodsTemp,
						// 							co2: co2,
						// 							sensorLabels: labels.split('_') // 分割成标签数组
						// 						};
						// }
						// 						console.log(result);

						updateCardValues();

					}, //响应成功后的回调函数
					error: function() {
						alert("出错啦...")
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text" //设置接受到的响应数据的格式
				});
			}
			// get_Sensor_Historu_Data();

			let last_OPENDoor = 1;
			let last_CLOSEDoor = 1;
			let last_Shock = 0;
			let last_Light = 0;

			function get_Count_Data() {
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/va/getmsg", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						type: 3, //3 为TCP 1为mqtt
						topic: 'Count',
						num: 1
					},
					success: function(message) {
						var res = JSON.parse(message);
						// console.log(res);
						// console.log(res.data);

						let input = res.data[0].msg;
						const parts = input.split('#').filter(part => part !== '');

						// 2. 提取数值和标签
						const [OPENDoor, CLOSEDoor, Light, Shock, labels] = parts;

						// 3. 转换数值类型并解析标签
						const result = {
							OPENDoor: OPENDoor,
							CLOSEDoor: CLOSEDoor,
							Light: Light,
							Shock: Shock,
							sensorLabels: labels.split('_') // 分割成标签数组
						};
						if (res.data[0].time === Count_last_Time) {} else {
							Count_last_Time = res.data[0].time;
							document.getElementById('Open-door').textContent = OPENDoor;
							document.getElementById('Close-door').textContent = CLOSEDoor;
							document.getElementById('Light').textContent = Light;
							document.getElementById('Shock').textContent = Shock;

							if (OPENDoor - last_OPENDoor > 0) {
								last_OPENDoor = OPENDoor;
								sendWechart("单簧管传感器", "门已打开");
							}
							if (CLOSEDoor - last_CLOSEDoor > 0) {
								last_CLOSEDoor = CLOSEDoor;
								sendWechart("单簧管传感器", "门已关闭");
							}
							if (Light - last_Light > 10) {
								last_Light = 0;
								sendWechart("光照传感器", "光照次数异常");
							}
							if (Shock - last_Shock > 30) {
								last_Shock = 0;
								sendWechart("震动传感器", "震动次数异常");
							}
						}
						console.log(result);
					}, //响应成功后的回调函数
					error: function() {
						alert("出错啦...")
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text" //设置接受到的响应数据的格式
				});
			}
			get_Count_Data();

			function get_Sensor_New_Data() {
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/va/getmsg", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						type: 3, //3 为TCP 1为mqtt
						topic: 'Sensor',
						num: 1
					},
					success: function(message) {
						var res = JSON.parse(message);
						// console.log(res);
						// console.log(res.data[0].time);
						// console.log(res.data[0].msg);
						let input = res.data[0].msg;
						const parts = input.split('#').filter(part => part !== '');
						const [airHumi, airTemp, goodsTemp, co2, labels] = parts;
						const result = {
							airTemp: airTemp,
							airHumi: airHumi,
							goodsTemp: goodsTemp,
							co2: co2,
							sensorLabels: labels.split('_')
						};
						if (res.data[0].time === Sensor_last_Time) {} else {
							Sensor_last_Time = res.data[0].time;
							if(airTemp>40){
								sendWechart("空气温度传感器", "空气温度异常");
							}
							if(airHumi>95){
								sendWechart("空气湿度传感器", "空气湿度异常");
							}
							if(goodsTemp>40){
								sendWechart("物品温度传感器", "物品温度异常");
							}
							if(co2>6000){
								sendWechart("二氧化碳传感器", "二氧化碳浓度异常");
							}
							const now = new Date(res.data[0].time);
							const hours = now.getHours().toString().padStart(2, '0');
							const minutes = now.getMinutes().toString().padStart(2, '0');
							const timeString = `${hours}:${minutes}`;
							// let timeString = res.data[0].time;
							// console.log(timeString);
							addDataPoint(tempChart, {
								time: timeString,
								value: airTemp
							});

							addDataPoint(humidityChart, {
								time: timeString,
								value: airHumi
							});

							addDataPoint(cargoTempChart, {
								time: timeString,
								value: goodsTemp
							});

							addDataPoint(co2Chart, {
								time: timeString,
								value: co2
							});
							updateCardValues();
						}

						console.log(result);
					}, //响应成功后的回调函数
					error: function() {
						alert("出错啦...")
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text" //设置接受到的响应数据的格式
				});
			}
			get_Sensor_New_Data();



			setInterval(() => {
				get_Sensor_New_Data();
				get_Count_Data();
			}, 3000); // 每5秒更新一次

			// 	// 随机生成一些趋势变化
			// const trends = document.querySelectorAll('.trend');
			// trends.forEach(trend => {
			// 	if (1 > 0.7) {
			// 		if (trend.classList.contains('up')) {
			// 			trend.classList.remove('up');
			// 			trend.classList.add('down');
			// 			trend.innerHTML = '<i class="fas fa-arrow-down"></i> <span>' +
			// 				(Math.random() * 0.5).toFixed(1) + ' 较上次</span>';
			// 		} else if (trend.classList.contains('down')) {
			// 			trend.classList.remove('down');
			// 			trend.classList.add('up');
			// 			trend.innerHTML = '<i class="fas fa-arrow-up"></i> <span>' +
			// 				(Math.random() * 0.8).toFixed(1) + ' 较上次</span>';
			// 		} else {
			// 			if (Math.random() > 0.5) {
			// 				trend.classList.add('up');
			// 				trend.innerHTML = '<i class="fas fa-arrow-up"></i> <span>' +
			// 					(Math.random() * 1.0).toFixed(1) + ' 较上次</span>';
			// 			} else {
			// 				trend.classList.add('down');
			// 				trend.innerHTML = '<i class="fas fa-arrow-down"></i> <span>' +
			// 					(Math.random() * 0.6).toFixed(1) + ' 较上次</span>';
			// 			}
			// 		}
			// 	}
			// });

			// // 随机更改CO2状态
			// if (1 > 0.9) {
			// 	const co2Status = document.querySelector('.co2-card .status');
			// 	if (co2Status.innerHTML.includes('接近上限')) {
			// 		co2Status.innerHTML =
			// 			'<i class="fas fa-check-circle" style="color: #92fe9d;"></i> <span>正常范围</span>';
			// 	} else {
			// 		co2Status.innerHTML =
			// 			'<i class="fas fa-exclamation-triangle" style="color: #ffd26f;"></i> <span>接近上限</span>';
			// 	}
			// }
		</script>
	</body>
</html>